<template>
	<div id="myChart3"></div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import echarts from "@/common/utils/echarts.js";
import {cockpitApi} from "@/api/investment";
const myChart3 = ref(null);

const props = defineProps({
	year:{
		type:String,
		default:()=>{
			let date = new Date(); // 获取时间
			return  date.getFullYear() // 获取年
		}
	}
});

/**
 * 年度项目计划
 */
const getYearPlan = (year) => {
	cockpitApi.getYearPlan({year:year}).then(res=>{

	});
}


const color = ["#fc702b", "#d3af88"];
const datas = ref([
	{
		name: "计划外",
		value: 0,
		num:0,
	},
	{
		name: "计划内",
		value: 0,
		num:0,
	},
]);
let sum = 0;
for (var i of datas.value) {
	sum += i.value;
}
const title = {};
const rich = {
	name: {
		color: "#DEDEDE",
		fontSize: 16,
		align: "left",
		padding: [0, 10, 20, 0],
	},
	value: {
		color: "#ccc",
		fontSize: 14,
		align: "left",
	},
	title: {
		//  color: '#fff',
		color: "#C60020",
		fontWeight: "bold",
		fontSize: 40,
	},
};
let option = {
	color,

	legend: {
		orient: "vertical",
		icon: "circle",
		x: "55%",
		y: "center",
		itemWidth: 12,
		itemHeight: 12,
		itemGap: 20,
		width: "263",
		align: "left",
		textStyle: {
			color: "#1A1A1A",
			rich,
		},
		formatter: function (name) {
			let res = datas.value.filter((v) => v.name === name);
			let str = "";
			str =
				"{name1|" + res[0].name + "}" + "丨{name1|" + res[0].num + " (万)}";
			return str;
		},
	},

	series: [
		{
			type: "pie",
			center: ["35%", "50%"],
			radius: ["25%", "50%"],
			data: datas.value,
			startAngle: 180,
		},
	],
};

const init =async (year) => {
	const res = await cockpitApi.getYearPlan({year:year});
	datas.value[0].value = res.data.planOutRatio;
	datas.value[1].value = res.data.planInRatio;
	datas.value[0].num = (res.data.planOutAmount/10000).toFixed(2);
	datas.value[1].num = (res.data.planInAmount/10000).toFixed(2);
	myChart3.value = echarts.init(document.getElementById("myChart3"));
	myChart3.value.setOption(option);
};

/**
 * 搜索
 */
const onSearch = () => {
	init(props.year);
}

defineExpose({
	onSearch
});

onMounted(() => {
	init(props.year);
});
</script>
<style lang="scss" scoped>
#myChart3 {
	width: 100%;
	height: 100%;
}
</style>
